<template>
    <view class="page">
		<view class="op" v-bind:style="{width:viewWidth+'%'}">
			
		</view>
	    <view  style="height: 150upx;width: 100%;z-index: 999;">
			  <scroll-view  class="scroll_t_view" scroll-into-view="right"  scroll-x="true" :scroll-left="id"  @scrolltoupper="upper" @scrolltolower="lower"
                @scroll="scroll">
                    <view @tap="xuan_fun(calen.rq,index,calen.year,calen.month,calen.date)" id="demo1" v-for="(calen,index) in yueri" v-bind:key="calen" class="scroll-view">
						<view style="margin:auto;width: 95%;height: 126upx;" v-bind:class="{xuan_back:xuanid==calen.rq}">
						<view  style="margin:auto;width: 95%;height: 100upx;border-right: #52B8F5 1upx solid; border-left: #eeeeee 1upx solid;">
						   
						   <view v-bind:class="[{xuan_top:xuanid==calen.rq},'rq_css']" >{{calen.rq}}</view>
						   <view  style="margin: auto;width: 90%;height: 50upx;line-height:50upx;text-align: center;color:white;font-size:28upx;">{{calen.xq}}</view>
					    </view>
						</view>
					</view>
               
                </scroll-view>
		</view>
    </view>
</template>

<script>
var yous=null;
var you_this=null;
export default {
  props: ['xuanid','yearc','monthc','datec','viewWidth'],
    data() {
        return {
			
			zuo:'0',
			you:'4',
			id:0,
			mbr:82.8,
			year:'',
			month:'',
			date:'',
			yueri:'',
			vue_s:{
				rq:'',
				xq:''
			}
        };
    },
	created(){
	
		uni.getSystemInfo({
    success: function (res) {
       you_this=parseInt(res.screenWidth);
	   
    }
});
		this.riqi();
	    this.mbr=(you_this*(parseInt(this.viewWidth)/100))/5;
		
		
		let myDate = new Date();
		let nian=myDate.getFullYear();    //获取完整的年份(4位,19this.mbr-????)
		let yue=myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
		let ri=myDate.getDate(); 
		for(let y=0;y<100;y++){
			let xian_myDate =(Date.parse(new Date(nian+'/'+yue+'/'+ri))/1000+86400*y);
			let riq=((new Date(parseInt(xian_myDate) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')).substr(0,9)).split("/");
		
			if(riq[0]+"/"+riq[1]+"/"+riq[2]==this.yearc+"/"+this.monthc+"/"+this.datec){
				this.xuan_fun(this.xuanid,y,this.yearc,this.monthc,this.datec);
				break;
			}
			}
			
		
	},

    methods: {
		riqi:function(){
			let month_date=[];
			let myDate = new Date();
			let nian=myDate.getFullYear();    //获取完整的年份(4位,19this.mbr-????)
			let yue=myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
			let ri=myDate.getDate();        //获取当前日(1-31)
			this.year=nian;
			this.month=yue;
			this.date=ri;
			let dates_time=new Date(nian+'/'+yue+'/'+ri);
			for(let i=0;i<100;i++){
				let xian_myDate =(Date.parse(dates_time)/1000+86400*i);
				let riq=((new Date(parseInt(xian_myDate) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')).substr(0,9)).split("/");
				let number=parseInt(new Date(riq[0]+'/'+riq[1]+'/'+riq[2]).getDay());
				let date_name_two='今天';
				//console.log(riq[0]+'-'+riq[1]+'-'+riq[2]);
				if(number==1){
					date_name_two='周一';
					
				}else if(number==2){
					date_name_two='周二';
					
				}else if(number==3){
					date_name_two='周三';
				
				}else if(number==4){
					date_name_two='周四';
					
				}else if(number==5){
					date_name_two='周五';
					
				}else if(number==6){
					date_name_two='周六';
				
				}else{
					date_name_two='周日';
					
				}
				var obj={rq:riq[1]+"/"+riq[2],xq:date_name_two,year:riq[0],month:riq[1],date:riq[2]};
				
		
			
				month_date.push(obj);
			}
			this.yueri=month_date;
		
			
		},
		you_xun:function(you){
			yous=you;
			you_this=this;
			setTimeout(function(){
				
					you_this.id=you_this.id+15;
				
			if(you_this.id>(yous-1)*you_this.mbr){
				you_this.id=(yous-1)*you_this.mbr;
				return;
			}else{
				you_this.you_xun(yous);
			}
			},10);
		},
		zuo_xun:function(you){
			yous=you;
			you_this=this;
			setTimeout(function(){
				
					you_this.id=you_this.id-15;
			
			
			if(you_this.id<(yous-3)*you_this.mbr){
				you_this.id=(yous-3)*you_this.mbr;
				
				
				return;
			}else{
				you_this.zuo_xun(yous);
			}
			},10);
		},
		parentHandleclick:function(){
			console.log("你好");
		},
		xuan_fun:function(rq,ids,year,month,date){
			//this.xuan_id=rq;
			this.$emit('fundata',{
				year:year,
				month:month,
				date:date,
			});
			if(ids==this.you){
				if(ids>this.yueri.length-3){
					this.id=(this.yueri.length-1)*this.mbr;
					this.zuo=this.yueri.length-5;
					this.you=this.yueri.length-1;
					return;
				}
				this.you_xun(ids);
				this.zuo=ids-1;
				this.you=ids+3;
				
			}else if(ids==this.zuo){
				if(ids<3){
					this.id=0;
					this.zuo=0;
					this.you=4;
					return;
				}
				this.zuo_xun(ids);
				this.zuo=ids-3;
				this.you=ids+1;
				
			}else{
		    if(this.zuo+1==ids || this.zuo+2==ids || this.zuo+3==ids){
				return;
			}
			this.id=(ids-2)*this.mbr;
			this.zuo=ids-2;
			this.you=ids+2;
			}
			
		},
		
		
		
		
    }
};
</script>
<style>
	scroll-view{
		display:flex;
		
	}
	
.scroll-view{
	 width: 20%;
	          padding-top:25upx;
			 height:150upx;
			 
			 display: inline-block;
			 line-height: 150upx;
			 text-align: center;
		
}

	 .scroll_t_view{
     width:100%;
      height:150upx;
	
		flex-wrap: nowrap;
		white-space: nowrap;
	 }
.xuan_back{
	background: #ffffff;
}
.rq_css{
	margin-left:5%;width: 90%;height: 50upx;line-height:50upx;text-align: center;color:white;font-size:26upx;
}
.xuan_top{


	
}
.op{
	background: #eeeeee!important;

	height: 150upx;opacity: 0.8;position: absolute;
	left: 0px;
	top:80px
}

</style>
